<?php
// about.php - About Page
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Global Food Market</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Modern Header -->
    <header class="modern-header">
        <div class="header-top">
            <div class="container">
                <div class="header-contact">
                    <span><i class="fas fa-phone"></i> +1 (555) 123-4567</span>
                    <span><i class="fas fa-envelope"></i> info@globalfoodmarket.com</span>
                </div>
                <div class="header-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
        
        <nav class="main-nav">
            <div class="container">
                <div class="nav-brand">
                    <h1 class="logo">Global Food Market</h1>
                    <p class="tagline">Taste the World</p>
                </div>
                <ul class="nav-menu">
                    <li><a href="index.php" class="nav-link">Home</a></li>
                    <li><a href="products.php" class="nav-link">Products</a></li>
                    <li><a href="about.php" class="nav-link active">About</a></li>
                    <li><a href="contact.php" class="nav-link">Contact</a></li>
                    <li><a href="admin/login.php" class="nav-link admin-btn">Admin</a></li>
                </ul>
                <div class="nav-actions">
                    <button class="cart-btn">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </button>
                    <button class="mobile-menu-btn">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <!-- About Header -->
    <section class="page-header">
        <div class="container">
            <h1>About Global Food Market</h1>
            <p>Our story, mission, and commitment to authentic flavors</p>
        </div>
    </section>

    <!-- About Content -->
    <section class="about-content">
        <div class="container">
            <div class="about-grid">
                <div class="about-text">
                    <h2>Our Story</h2>
                    <p>Founded in 2024, Global Food Market was born from a passion for authentic international cuisine and a desire to share the world's most delicious flavors with food lovers everywhere.</p>
                    
                    <h3>Our Mission</h3>
                    <p>We connect you directly with authentic food products from their countries of origin, ensuring you get the real taste experience without compromise.</p>
                    
                    <h3>Why Choose Us?</h3>
                    <ul>
                        <li>Direct sourcing from local producers</li>
                        <li>100% authentic products</li>
                        <li>Rigorous quality control</li>
                        <li>Sustainable and ethical practices</li>
                    </ul>
                </div>
                
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1556909114-4d0d853e5e25?w=600&auto=format&fit=crop&q=60" alt="Our Store">
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="team-section">
        <div class="container">
            <h2 class="section-title">Meet Our Team</h2>
            <div class="team-grid">
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=60" alt="Founder">
                    </div>
                    <h3>John Smith</h3>
                    <p class="role">Founder & CEO</p>
                    <p>Food enthusiast with 10+ years in international trade</p>
                </div>
                
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=300&auto=format&fit=crop&q=60" alt="Head Buyer">
                    </div>
                    <h3>Sarah Johnson</h3>
                    <p class="role">Head Buyer</p>
                    <p>Former chef with expertise in Asian and European cuisines</p>
                </div>
                
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&auto=format&fit=crop&q=60" alt="Quality Control">
                    </div>
                    <h3>Michael Chen</h3>
                    <p class="role">Quality Control Manager</p>
                    <p>Ensures every product meets our high standards</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Modern Footer -->
    <footer class="modern-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Global Food Market</h3>
                    <p>Bringing authentic international flavors to your kitchen since 2024.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="products.php">Products</a></li>
                        <li><a href="about.php">About Us</a></li>
                        <li><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="products.php?category=sauces">Sauces</a></li>
                        <li><a href="products.php?category=snacks">Snacks</a></li>
                        <li><a href="products.php?category=spices">Spices</a></li>
                        <li><a href="products.php?category=beverages">Beverages</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Contact Info</h4>
                    <div class="contact-info">
                        <p><i class="fas fa-map-marker-alt"></i> 123 Food Street, City, Country</p>
                        <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
                        <p><i class="fas fa-envelope"></i> info@globalfoodmarket.com</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Global Food Market. All rights reserved. | ICTWEB513 E-Commerce Integration Project</p>
            </div>
        </div>
    </footer>

    <style>
        .about-content {
            padding: var(--space-xxl) 0;
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--space-xl);
            align-items: start;
        }
        
        .about-text h2 {
            color: var(--primary);
            margin-bottom: var(--space-md);
        }
        
        .about-text h3 {
            color: var(--text);
            margin: var(--space-lg) 0 var(--space-md);
        }
        
        .about-text ul {
            margin-left: var(--space-lg);
            color: var(--text-light);
        }
        
        .about-text li {
            margin-bottom: var(--space-sm);
        }
        
        .about-image img {
            width: 100%;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
        }
        
        .team-section {
            padding: var(--space-xxl) 0;
            background: var(--secondary);
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-xl);
            margin-top: var(--space-xl);
        }
        
        .team-member {
            text-align: center;
            background: var(--white);
            padding: var(--space-xl);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }
        
        .member-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto var(--space-md);
            border: 4px solid var(--primary-light);
        }
        
        .member-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .team-member h3 {
            color: var(--primary);
            margin-bottom: var(--space-xs);
        }
        
        .role {
            color: var(--accent);
            font-weight: 600;
            margin-bottom: var(--space-md);
        }
        
        @media (max-width: 768px) {
            .about-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>